import React, { Component } from 'react'
import event from '../../events'
class Undone extends Component {
    constructor() {
        super()
        this.state = {
            list: JSON.parse(localStorage.getItem('done')) || [],
        }
    }
    componentDidMount() {
        event.addListener('add', ele => {
            this.state.list.push(ele);
            this.setState({
                list: this.state.list
            })
            localStorage.setItem('done', JSON.stringify(this.state.list))
        })
        event.addListener('done', () => {
            this.state.list = JSON.parse(localStorage.getItem('done'))
            this.setState({
                list: this.state.list
            })
        })
    }
    render() {
        return (
            <div className='undone_container'>
                <h2>正在进行<span>{this.state.list.length}</span></h2>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            if (item.type === false) {
                                return <li key={index}>
                                    <input type='checkbox' checked={item.type} onChange={() => {
                                        item.type = true
                                        this.setState({
                                            list: this.state.list
                                        })
                                        localStorage.setItem('done', JSON.stringify(this.state.list))
                                        event.emit('undone')
                                    }} />
                                    <p>{item.value}</p>
                                    <span onClick={() => {
                                        console.log(index);
                                        this.state.list.splice(index, 1)
                                        this.setState({
                                            list: this.state.list
                                        })
                                        localStorage.setItem('done', JSON.stringify(this.state.list))
                                    }}>-</span>
                                </li>
                            }
                        })
                    }
                </ul>
            </div>
        )
    }
}
export default Undone